<script setup>
import {message} from 'ant-design-vue';
import {ref} from 'vue';
import {repairManagementAdd, repairManagementUpdate, repairManagementOne} from '@/api/repairManagementApi.js';
import {CheckOutlined, CloseOutlined} from '@ant-design/icons-vue';
import * as commonDict from '@/utils/commonDict.js';


const open = ref(false);
const formRef = ref(null);
const emits = defineEmits(['saveSuccessful'])
import {loading} from '@/utils/loadingUtils.js';
import dayjs from 'dayjs';

const form = ref({
  residentId: '',
  repairType: '',
  repairDescription: '',
  repairDate: '',
  status: undefined,
  createTime: '',
})

const onOpen = (id) => {
  if (id) {
    handleUpdate(id)
  }
  open.value = true
}

const handleUpdate = (id) => {
  repairManagementOne(id).then(res => {
    form.value = res
    form.value.repairDate = dayjs(form.value.repairDate,'YYYY-MM-DD')

    onOpen()
  })
}
const onClose = () => {
  open.value = false
  resetForm()
}


const resetForm = () => {
  formRef.value.resetFields();
  form.value.id = ''
};


const submit = () => {
  formRef.value.validate().then(async () => {
    if (form.value.id) {
      await repairManagementUpdate(form.value)
    } else {
      await repairManagementAdd(form.value)
    }
    message.success(form.value.id ? '更新成功' : '保存成功')
    emits('saveSuccessful')
    onClose()
  })
}

defineExpose({
  onOpen
})
</script>

<template>

  <a-modal :confirm-loading="loading" @ok="submit" v-model:open="open" width="700px" @cancel="onClose" @close="onClose">
    <a-form :model="form" ref="formRef" layout="vertical">
      <a-form-item
          label="报修人ID"
          name="residentId"
          :rules="[{ required: true, message: '请输入报修人ID' }]"
      >
        <a-input
            placeholder="请输入报修人ID"
            v-model:value="form.residentId"></a-input>
      </a-form-item>
      <a-form-item
          label="报修类型"
          name="repairType"
          :rules="[{ required: true, message: '请输入报修类型' }]"
      >
        <a-input
            placeholder="请输入报修类型"
            v-model:value="form.repairType"></a-input>
      </a-form-item>
      <a-form-item
          label="报修描述"
          name="repairDescription"
          :rules="[{ required: true, message: '请输入报修描述' }]"
      >
        <a-input
            placeholder="请输入报修描述"
            v-model:value="form.repairDescription"></a-input>
      </a-form-item>
      <a-form-item
          label="报修日期"
          name="repairDate"
          value-format="YYYY-MM-DD"
          :rules="[{ required: true, message: '请输入报修日期' }]"
      >
        <a-date-picker v-model:value="form.repairDate">
        </a-date-picker>
      </a-form-item>
      <a-form-item
          label="报修状态"
          name="status"
          :rules="[{ required: true, message: '请输入报修状态' }]"
      >
        <a-select
            placeholder="请输入报修状态"
            :options="Object.keys(commonDict.fixStatus).map(x => ({label:commonDict.fixStatus[x],value:x}))"
            v-model:value="form.status"></a-select>
      </a-form-item>
    </a-form>
  </a-modal>

</template>

<style scoped>

</style>
